<template>
  <div class="home_app">
        <el-container class="home_Container">
          <el-header>
            <div class="header_d">
              <img src="../assets/logo.png" alt="">
              <span class="header_s">酒店后台管理系统</span>
            </div>
              <el-dropdown>
                  <el-button type="success" icon="el-icon-user">
                    个人资料
                  </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button type="warning" plain @click="getLoginUser">修改</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="danger" plain @click="logout">退出</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
          </el-header>
          <el-container>
            <el-aside :width="isCollapse ? '64px' : '200px' ">
              <div class="toggle-button" @click="toggleCollapse">|||</div>
              <el-menu
                    :default-active="activePath"
                    class="el-menu-vertical-demo"
                    background-color="#32373b"
                    text-color="#fff"
                    unique-opened
                    :collapse="isCollapse"
                    :collapse-transition = "false"
                     router
                    active-text-color="#aaffff">
                    <el-submenu  v-for="item in data" :key="item.id" :index="item.id+''">
                      <template slot="title">
                        <i :class="iconsObj[item.id]"></i>
                        <span>{{item.authName}}</span>
                      </template>
                      <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index=" '/'+subItem.path" @click="saveNavState('/'+subItem.path)">
                        <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>{{subItem.authName}}</span>
                      </template></el-menu-item>
                    </el-submenu>
                  </el-menu>
            </el-aside>
            <el-container>
              <el-main>
                <router-view/>
                  <el-dialog
                    title="修改个人信息"
                    :visible.sync="loginDialogVisible"
                    width="50%"
                    height="70%"
                    @close="loginDialogClose">
                    <el-form :model="LoginUser" :rules="loginFormRules" ref="loginFormRef" label-width="100px">
                      <el-form-item label="账号" prop="usercode">
                        <el-input v-model="LoginUser.usercode" disabled></el-input>
                      </el-form-item>
                      <el-form-item label="姓名" prop="username">
                        <el-input v-model="LoginUser.username"></el-input>
                      </el-form-item>
                      <el-form-item label="密码" prop="password">
                        <el-input v-model.number="LoginUser.password"></el-input>
                      </el-form-item>
                      <el-form-item label="性别" prop="gener">
                        <el-input v-model.number="LoginUser.gener"></el-input>
                      </el-form-item>
                      <el-form-item label="电话" prop="phone">
                        <el-input v-model="LoginUser.phone"></el-input>
                      </el-form-item>
                      <el-form-item label="地址" prop="address">
                        <el-input v-model.number="LoginUser.address"></el-input>
                      </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="loginDialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="setLoginUser">确 定</el-button>
                    </span>
                  </el-dialog>
              </el-main>
            </el-container>
          </el-container>
        </el-container>
  </div>
</template>

<script>
  export default {
    name:'Home',
    data(){
      return{
        //是否折叠
        activePath:'',
        LoginUser:[],
        loginDialogVisible:false,
        isCollapse: false,
        iconsObj:{
          100:'el-icon-user-solid',
          103:'el-icon-office-building',
          101:'el-icon-house',
          102:'el-icon-shopping-cart-1',
          145:'el-icon-monitor',
        },
        data:[
          {
            id:100,authName:"用户管理",path:"goods",children:[{id:0,authName:"用户列表",path:"users"}]
          },
          {
            id:103,authName:"酒店管理",path:"rights",children:[{id:1,authName:"酒店列表",path:"hotel"}]
          },
          {
            id:101,authName:"房间管理",path:"goods",children:[{id:2,authName:"房间列表",path:"room"}],
          },
          {
            id:102,authName:"订单管理",path:"order",children:[{id:3,authName:"订单列表",path:"order"}]
          }
        ],
		loginFormRules:{
		  usercode:[
		    {required:true, message:'请输入账号', trigger:'blur'},
		    {min:4, max:16,message:'长度在4到16个字符',trigger:'blur'}
		  ],
		  username:[
		    {required:true, message:'请输入用户名', trigger:'blur'},
		    {min:0, max:16,message:'长度在4到16个字符',trigger:'blur'}
		  ],
		  password:[
		    {required:true, message:'请输入密码',trigger:'blur'},
		    {min:6,max:12,message:'长度在6到12个字符',trigger:'blur'}
		  ],
		  gener:[
		    {required:true, message:'请输入性别', trigger:'blur'},
		    {min:0, max:10,message:'长度在0到10个字符',trigger:'blur'}
		  ],
		  phone:[
		    {required:true, message:'请输入手机号', trigger:'blur'},
		    {min:8, max:11,message:'长度在8到11个字符',trigger:'blur'}
		  ],
		  address:[
		    {required:true, message:'请输入地址', trigger:'blur'},
		    {type: 'number',min:1, max:3,message:'长度在0到3个字符',trigger:'blur'}
		  ],
		}
      }
    },
    created(){
      // this.getMenuList()
      this.activePath = window.sessionStorage.getItem('activePath')
    },
    methods:{
      logout(){
        window.sessionStorage.clear()
        this.$router.push('/')
      },
      toggleCollapse(){
        this.isCollapse = !this.isCollapse
      },
      saveNavState(activePath){
        window.sessionStorage.setItem('activePath',activePath)
        this.activePath = activePath
      },
      loginDialogClose(){
        this.loginDialogVisible = flase
      },
      getLoginUser(){
        const that = this
        const loginCode = window.sessionStorage.getItem('token')
        this.axios.get('http://localhost:8090/user/getloginuser/'+loginCode).then(res=>{
          that.LoginUser = res.data
        })
        this.loginDialogVisible = true
      },
      setLoginUser(){
        const that = this
        this.axios.put('http://localhost:8090/user/updateUser/'+this.LoginUser.usercode,this.LoginUser).then(res=>{
            if(res.data) {
              this.loginDialogVisible = false
              this.$message.success('修改成功!')
            }else{
              this.$message.error('修改错误!')
            }
          })
      }
    }
  }
</script>

<style scoped>
  .home_app{
    height: 100%;
    width: 100%;
  }
  .home_Container{
    height: 100%;
  }
  .el-header{
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    background-color: #373d41;
    color: #fff;
    font-size: 20px;
  }
  .header_d{
    display: flex;
    align-items:center;
  }
  .header_s{
    margin-left: 15px;
  }

  img{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #eee;
  }
  .el-aside{
    background-color: #373d41;
  }
  .el-main{
    background-color: #EAEDF1;
  }
  .el-footer{
    background-color: #373d41;
  }
  .toggle-button{
    background-color: #4A5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;

  }
</style>
